<template>
    <modal
        class='component-actionsheet'
        :show='show'
        mode='bottom'
        :title='title'
        :maskClose='maskClose'
        :closeButton='false'
        @close='emitClose'>
        <h1 class="component-actionsheet__title" v-if='title'> {{ title }} </h1>
        <div class="component-actionsheet__content">
            <slot></slot>
        </div>
        <footer class="component-actionsheet__cancle component-actionsheet__item" @click='emitClose'>取消</footer>
    </modal>
</template>

<script>
    import modal from './Modal.vue'
    import buttonLoading from './ButtonLoading.vue'

    export default {
        props:{
            loading:{
                type: Boolean,
                default: false
            },
            maskClose:{
                type: Boolean,
                default:true
            },
            tips:{
                type: String,
                default:''
            },
            title:{
                type: String,
                default:''
            },
            show:{
                type: Boolean,
                required: true,
            },
            closeText:{
                type: String,
                default: '取消',
            },
            confirmText:{
                type: String,
                default: '确定',
            }
        },
        data() {
            return {

            }
        },
        methods:{
            emitClose(){
                this.$emit('close')
            },
            emitCancle(){
                this.$emit('close')
                this.$emit('cancle')
            },
            emitConfirm(){
                this.$emit('confirm')
            }
        },
        components:{ modal, buttonLoading }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    .component-actionsheet{
        .component-modal__main{
            padding:0;
            background-color: $backgroundColor;
        }
        .component-actionsheet__item{
            background-color: #fff;
            border-bottom:1px solid $sectionColor;
            position: relative;
            padding: 10px 0;
            text-align: center;
            font-size: 15px;
            font-weight: normal;
            color:$importColor;
            line-height:1.5;
            &:last-child{
                border-bottom: none;
            }
            &:active{
                background-color: $backgroundColor;
            }
        }
        .component-actionsheet__cancle{
            margin-top: 6px;
        }
    }
</style>


